<template>
  <el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
    <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input v-model="form.jobName" placeholder="任务名称" clearable />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="form.createTime"
          clearable
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.success" placeholder="请选择" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-close" plain @click="handleClearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row class="g-row">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
        <el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
        <el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
        <el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
        <el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
        <el-table-column prop="createTime" label="异常详情" width="110px">
          <template v-slot="scope">
            <el-button
              v-show="scope.row.exceptionDetail"
              size="mini"
              type="text"
              @click="info(scope.row.exceptionDetail)"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
        <el-table-column align="center" prop="success" width="80px" label="状态">
          <template v-slot="scope">
            <el-tag :type="scope.row.success ? 'success' : 'danger'">{{ scope.row.success ? '成功' : '失败' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
        <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
          <pre v-highlightjs="errorInfo"><code class="java" /></pre>
        </el-dialog>
      </el-table>
    </el-row>
    <el-row class="g-row">
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </el-dialog>
</template>

<script>
import SchedulerApi from '@/api/system/scheduler'

export default {
  name: 'SchedulerLog',
  data() {
    return {
      loading: true,
      dialog: false,
      options: [
        { label: '成功', value: true },
        { label: '失败', value: false }
      ],
      tableData: [],
      form: {
        jobName: null,
        createTime: null,
        success: null
      },
      page: {
        currentPage: 1,
        size: 10,
        total: 10
      },
      title: '任务日志',
      errorInfo: '', errorDialog: false
    }
  },
  methods: {
    open() {
      this.dialog = true
      this.loadList(this.page.currentPage, this.page.size)
    },
    loadList(page, size) {
      this.loading = true
      SchedulerApi.listLogByPage(JSON.parse(JSON.stringify(this.form)), page, size).then(res => {
        this.loading = false
        this.page.currentPage = res.data.currentPage
        this.page.size = res.data.size
        this.page.total = res.data.total
        this.tableData = res.data.records
      })
    },
    handleSearch() {
      this.loadList(this.page.currentPage, this.page.size)
    },
    handleClearSearch() {
      this.form = {
        jobName: null,
        createTime: null,
        success: null
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.loadList(this.page.currentPage, val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadList(val, this.page.size)
    },
    // 异常详情
    info(errorInfo) {
      this.errorInfo = errorInfo
      this.errorDialog = true
    }
  }
}
</script>

<style scoped>
.g-row {
  margin-top: 10px;
}

.g-button {
  margin: 0;
  padding: 0;
  width: 40px
}

.java.hljs {
  color: #444;
  background: #ffffff !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>
